<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inputstream Data Viewer</title>
    <link rel="stylesheet" href="../../lib/bootstrap/3.3.5/css/bootstrap.min.css"/>
	<!--
    <link rel="stylesheet" href="stream-readonly-v4.css">
	-->
	<!--
	<style type="css">
	table {
		class:table-responsive table;
		table；
		table-bordered；
		table-condensed；
		table-striped；
	  border: 2px solid #42b983;
	  border-radius: 3px;
	  background-color: #fff;
	}
	
	th {
	  background-color: #42b983;
	  color: rgba(255,255,255,0.66);
	  cursor: pointer;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -user-select: none;
	}

	td {
	  background-color: #f9f9f9;
	}

	th, td {
	  min-width: 120px;
	  padding: 10px 20px;
	}

	th.active {
	  color: #fff;
	}

	th.active .arrow {
	  opacity: 1;
	}

	.arrow {
	  display: inline-block;
	  vertical-align: middle;
	  width: 0;
	  height: 0;
	  margin-left: 5px;
	  opacity: 0.66;
	}

	.arrow.asc {
	  border-left: 4px solid transparent;
	  border-right: 4px solid transparent;
	  border-bottom: 4px solid #fff;
	}

	.arrow.dsc {
	  border-left: 4px solid transparent;
	  border-right: 4px solid transparent;
	  border-top: 4px solid #fff;
	}
	</style>
	-->
</head>
<body>

    <!-- component template -->
    <script type="text/x-template" id="grid-template">
      <table class="table table-bordered table-condensed table-striped">
        <thead>
          <tr>
            <th v-repeat="key: columns"
              v-on="click:sortBy(key)"
              v-class="active: sortKey == key">
              {{key | capitalize}}
              <span class="arrow"
                v-class="reversed[key] ? 'dsc' : 'asc'">
              </span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-repeat="
            entry: data
            | filterBy filterKey
            | orderBy sortKey reversed[sortKey]">
            <td v-repeat="key: columns">
              {{entry[key]}}
            </td>
          </tr>
        </tbody>
      </table>
    </script>

    <!-- demo root element -->
    <div id="demo">
      <form id="search">
        Search <input name="query" v-model="searchQuery">
      </form>
	  <div class="table-responsive">
      <demo-grid
        data="{{gridData}}"
        columns="{{gridColumns}}"
        filter-key="{{searchQuery}}">
      </demo-grid>
	  </div>
    </div>
	
	<div id="app" class="" style="padding:20px">

		<div class=""><h2>输入流数据浏览 <small>Inputstream Data Viewer</small></h2></div>
		<hr />
		<!--  <div id="searchDiv" class="" style="background-color:#F0FFFF">  -->
		<div id="searchDiv" class="" style="background-color:#FFFACD">
		<fieldset>
			<!-- <legend></legend> -->
			<p>请输入查询条件</p>
			<form id="inputQuery">
			Begin Time <input type="text" name="begintime" v-model="begintime">
			End Time <input type="text" name="endtime" v-model="endtime">
			Remote Device Id <input type="text" name="remotedevice" v-model="remotedevice">
			Search <input name="query" v-model="searchQuery">
			</form>
			<div class="" >
				<button class="btn btn-primary" style="float:right" v-on="click:search">....    查 ... 询    ....</button>
				<br />
			</div>
		</fieldset>
		</div>
		<hr />
		<div>
			<button class="btn btn-default " v-on="click:removeSelected($event)">删除选中记录</button>
		</div>
		<div class="table-responsive">
			<table class="table table-bordered table-condensed table-striped">
			<thead>
				<tr class="info"> 
				<th>选择</th> 
				<th>时刻</th> 
				<th>设备标识</th> 
				<th>数据</th> 
				</tr> 
				<tr> 
				<th>#</th> 
				<th>Timestamp</th> 
				<th>Device Node</th> 
				<th>Payload</th> 
				</tr> 
			</thead>
			<tfoot>Table footer</tfoot>			
			<tbody>
				<!--
				<tr class="list-group-item item" v-repeat="item:items" track-by="rowid">
				-->
				<tr v-repeat="item:items" track-by="rowid">
				<td><input type="checkbox" v-model="item.selected"> {{item.selected ? "yes" : "no"}}</td> 
				<td>{{item.timestamp}}</td> 
				<td>{{item.node}}</td> 
				<td>{{item.frame}}</td> 
				</tr> 
			</tbody>
			</table>
		</div>
	
		<div>
		注：输入流数据来自实际测试过程中记录的数据文件。本模块仅用于查看数据的内容以辅助判断数据的正确性。
		</div>
		
		<hr />
		<div>
		for Debug only: 
		<pre>
			<div>{{ $data | json }}</div>
		</pre>	
		</div>
	</div>

    <script src="../../lib/jquery/2.1.4/jquery-2.1.4.min.js"></script>
    <script src="../../lib/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="../../lib/vue/0.12.10/vue.js"></script>
    <script src="stream-readonly-v4.js"></script>
</body>
</html>